<template>
  <div class="history">
    <div class="top">
      <h1 class="title">历史记录</h1>
      <i class="icon-clear" @click.stop="clear"></i>
    </div>
    <scroll class="scroll" :style="{'height':h+'px'}">
      <ul class="group">
        <li class="item" v-for="(item,index) in history" :key="index" @click="selectHistory(item)">
          <h1>{{ item }}</h1>
          <i class="icon-delete" @click.stop="remove(index)"></i>
        </li>
      </ul>
    </scroll>
  </div>
</template>

<script>
  import Scroll from "@/base/scroll/Scroll";
  import {mapGetters} from 'vuex'
    export default {
        name: "SearchHistory",
        components: {Scroll},
        props: {
            h: {
                type: Number,
                default: 300
            },
        },
        computed: {
            ...mapGetters('search',['history'])
        },
        methods: {
            remove(index){
                this.$emit('remove',index)
            },
            clear(){
               this.$emit('removeall')
            },
            selectHistory(record){
                this.$emit('selecthistory',record)
            }
        }
    }
</script>

<style scoped lang="stylus">
@import "~common/stylus/variable"
  .history
    position relative
    width 100%
    .scroll
      box-sizing border-box
      overflow hidden
      .group
        color $color-text-l
        font-size $font-size-medium-x
        .item
          position relative
          padding 10px 0
          h1
            font-size $font-size-large
          i
            position absolute
            top 10px
            right 10px
    .top
      color $color-text-ll
      .title
        margin-bottom .5rem
        font-size $font-size-large
        line-height 24px
        height 24px
      .icon-clear
        position absolute
        top 10px
        right 10px

</style>
